<template>
	<view>
		<!-- 顶部占位栏（适配状态栏 + 导航栏） -->
			<!-- <view :style="{ height: statusBarHeight + 'px' }"></view> -->
			<view class="content">
					<!-- 图片 -->
					<image style="width: 100%;height: 520rpx;float: top;" mode="aspectFill" :src="book.allImg" />
					<!-- 名称 -->
					<view class="cultureName">{{book.allName }}</view>
					<!-- 内容 -->
					<view class="introduce">
						<!-- 介绍 -->
						<view class="details">
						    <view class="title">简介</view>
						    <view class="intro-content">
						        {{book.allDetails}}
						    </view>
						</view>
						
						<!-- 图片展示 -->
						<view class="slideshow">
						    <view class="title">图片展示</view>
						    <scroll-view class="image-container" scroll-x>
						        <view class="image-wrapper" v-for="(item, index) in pictureList" :key="index">
						            <image class="gallery-image" :src="item.picture" mode="aspectFill"></image>
						        </view>
						    </scroll-view>
						</view>
						
						<!-- 历史 -->
						<view class="history">
						    <view class="title">历史渊源</view>
						    <view class="history-timeline">
								
									<view class="timeline-item" v-for="(history, index) in historyList" :key="index">
									    <view class="timeline-dot"></view>
										<uni-card>
									    <view class="timeline-content">{{history.historyPart}}</view>
											</uni-card>
									</view>
							
						      
						    </view>
						</view>
						<!-- 其他 -->
						<view class="technology">
							<view class="title" style="margin-bottom: 20px;">其他</view>
							<view>
								<!-- 制作工艺 -->
										<view class="box" @click="TodoMaterial()" :class="this.todoMaterial===false?'':'flipped'"
											v-show="ascriptionId==7||ascriptionId==8">
											<view class="card make" v-for="materials in materialsList">
												<!-- <view class="title">-制作材料</view> -->
												<view class="txt">{{materials.materialsText}}</view>
											</view>
											<view class="card back">
											 <img  :src="'https://s2.loli.net/2025/04/11/Wuc4aKQpTg9ODmY.png'" />
											
											</view>
										</view>
											
										<view class="box" @click="TodoTool()" :class="this.todoTool===false?'':'flipped'"
											v-show="ascriptionId==7||ascriptionId==8">
											<view class="card make" v-for="item in toolsList">
												<!-- <view class="title">-制作工具</view> -->
												<view class="txt">{{item.toolsText}}</view>
											</view>
											<view class="card back">
										 <img  :src="'https://s2.loli.net/2025/04/11/Wuc4aKQpTg9ODmY.png'" />
											
											</view>
										</view>
											
										<!-- 表演视频 -->
										<!-- <view class="box" v-show="ascriptionId!=5&&ascriptionId!=7&& ascriptionId!=9">
											<view class="card">
										
												<template>
													<view>
														<view class="uni-padding-wrap uni-common-mt" v-for="item in performanceVideoList">
															<view>
																<video id="myVideo" class="video" :src="item.performanceVideo" enable-danmu
																	controls style="width:100% ;height: 150px; border-radius: 20px;"></video>
															</view>
														</view>
													</view>
												</template>
											
											</view>
										</view> -->
								
								<!-- 制作流程 - 横向步骤条 -->
								<view v-show="ascriptionId==7||ascriptionId==8" class="process-container">
								    <view class="section-title">制作流程</view>
								    <scroll-view class="process-steps" scroll-x>
								        <view class="step" v-for="(make, index) in makeList" :key="index">
								            <view class="step-index">{{index + 1}}</view>
								            <view class="step-title">{{make.makeTitle}}</view>
								            <view class="step-content">{{make.makePart}}</view>
								        </view>
								    </scroll-view>
								</view>
										<!-- 荣誉 -->
										<view v-show="ascriptionId==1||ascriptionId==2" class="honor-carousel">
										    <view class="section-title">所获荣誉</view>
										    <swiper class="honor-swiper" circular indicator-dots>
										        <swiper-item v-for="(item, index) in honorList" :key="index">
										            <view class="honor-item">
										                <view class="trophy-icon">🏆</view>
										                <view class="honor-content">{{item.honorPart}}</view>
										            </view>
										        </swiper-item>
										    </swiper>
										</view>
										
										<!-- 表演形式 - 卡片堆叠 -->
										<view v-show="ascriptionId==1||ascriptionId==4||ascriptionId==6" class="performance-stack">
										    <view class="section-title">表演形式</view>
										    <view class="stack-container">
										        <view class="stack-item" v-for="(item, index) in formList" :key="index" 
										              :style="{transform: `translateY(${index*20}rpx)`, zIndex: formList.length - index}">
										            {{item.performanceFormText}}
										        </view>
										    </view>
										</view>
										
										<!-- 戏曲行当 - 标签云 -->
										<view v-show="ascriptionId==2" class="role-cloud">
										    <view class="section-title">戏曲行当</view>
											    <view class="stack-container">
											        <view class="stack-item" v-for="(item, index) in  theatreList" :key="index" 
											              :style="{transform: `translateY(${index*20}rpx)`, zIndex:  theatreList.length - index}">
											            {{item.theatreBusinessText}}
											        </view>
											    </view>
											</view>
										</view>
										
										<!-- 声音行腔 - 声波动画 -->
										<view v-show="ascriptionId==4||ascriptionId==6" class="vocal-wave">
										    <view class="section-title">声音行腔</view>
										    <view class="wave-container">
										        <view class="wave" v-for="(item, index) in vocalList" :key="index">
										            <view class="wave-title">{{item.vocalCavityPart}}</view>
										            <view class="wave-animation">
										                <view class="bar" v-for="i in 12" :key="i"
										                      :style="{animationDelay: `${i*0.1}s`}"></view>
										            </view>
										        </view>
										    </view>
										</view>
										
										<!-- 项目特色 - 折叠面板 -->
										<view v-show="ascriptionId==3||ascriptionId==8||ascriptionId==10" class="feature-accordion">
										    <view class="section-title">项目特色</view>
										    <view class="accordion-item" v-for="(item, index) in projectFeaturesList" :key="index"
										        >
										        <view class="accordion-header">
										            <view class="feature-title">{{item.projectFeatures}}</view>
										           
										        </view>
										    </view>
										</view>
										
										<!-- 节日相关 - 时间轴 -->
										<view v-show="ascriptionId==5" class="festival-timeline">
										    <view class="section-title">节日传说</view>
										    <view class="timeline">
										        <view class="timeline-item" v-for="(item, index) in backgroundList" :key="index">
										            <view class="timeline-dot"></view>
													<uni-card>
														<view class="timeline-content">
														    <view class="timeline-title">{{item.backgroundTitle}}</view>
														    <view class="timeline-text">{{item.backgroundText}}</view>
														</view>
													</uni-card>
										            
										        </view>
										    </view>
										    
										    <view class="section-title">节日习俗</view>
										    <swiper class="custom-swiper" autoplay interval="3000">
										        <swiper-item v-for="(item, index) in moresList" :key="index">
										            <view class="custom-item">
										                <view class="custom-title">{{item.moresTitle}}</view>
										                <view class="custom-text">{{item.moresText}}</view>
										                <image class="custom-image" :src="item.moresImage" mode="aspectFill"></image>
										            </view>
										        </swiper-item>
										    </swiper>
										    
										    <view class="section-title">文化延伸</view>
										    <view class="extension-grid">
										        <view class="grid-item" v-for="(item, index) in outspreadList" :key="index">
										            {{item.outspreadText}}
										        </view>
										    </view>
										</view>
										
										<!-- 文学内容 - 书本翻页 -->
										<view v-show="ascriptionId==9" class="literature-flip">
										    <view class="section-title">文学内容</view>
										    <view class="flip-book">
										        <view class="page" v-for="(item, index) in contentList" :key="index"
										              :class="{active: currentPage === index}">
										            <view class="page-title">{{item.literaryContentTitle}}</view>
										            <view class="page-content">{{item.literaryContentText}}</view>
										        </view>
										    </view>
										    <view class="page-controls">
										        <view class="page-btn" @click="prevPage" :class="{disabled: currentPage === 0}">上一页</view>
										        <view class="page-indicator">{{currentPage + 1}}/{{contentList.length}}</view>
										        <view class="page-btn" @click="nextPage" 
										              :class="{disabled: currentPage === contentList.length - 1}">下一页</view>
										    </view>
										</view>
											
											
							</view>
							
			
						</view>
					</view>
			
			
					<!-- 悬浮预约按钮 -->
					<view>
			      <view class="jiShe" @click="toAdd" v-if="change===1">
			          <u-icon class="icon" name="plus" size="45" color="#7C191E" padding-left="100px"></u-icon>
			          <text>加入</text>
			      </view>
			      
			      <view class="jiShe" @click="toDecrease" v-if="change===0">
			          <u-icon class="icon" name="minus" size="45" color="#7C191E" padding-left="100px"></u-icon>
			          <text>移除</text>
			      </view>
					</view>
					
				</view>
			
	</view>
	</template>

<script>
	import Qs from 'qs'
	export default {
		data() {
			return {
				id: 100,
				ascriptionId: undefined,
				todoMaterial: false,
				todoTool: false,
				todoFlow: false,
				showRecord: false,
				book: [],
				pictureList: [],
				historyList: [],
				makeList: [],
				toolsList: [],
				materialsList: [],
				toolsVideoList: [],
				makeVideoList: [],
				honorList: [],
				formList: [],
				theatreList: [],
				vocalList: [],
				performanceVideoList: [],
				projectFeaturesList: [],
				moresList: [],
				backgroundList: [],
				outspreadList: [],
				contentList: [],
				titleList: [{
					id: 1,
					titleOne: ""
				}],
				marksList: [], //用于删除
				marksId: 1,
				tokenList: [],
				// 记录
				value: '',
				type: 'textarea',
				border: true,
				height: 100,
				autoHeight: true,
				addForm: {
					marksAllId: 18,
					marksUserId: 1,
				},
				change: '',
				currentPage: 0, // 文学内容当前页码
				
			}
		},
onLoad(option) {
  // 项目id
  this.id = option.id;
  this.addForm.marksAllId = option.id;
  // 分类id
  this.ascriptionId = option.allAscriptionId;
  // 获取用户信息
  this.tokenList = uni.getStorageSync("storage_data") || {};
  this.userid = this.tokenList.vuex_id;

  if (!this.userid) {
    console.error('用户ID未获取到!', this.tokenList);
    uni.showToast({ title: '请先登录', icon: 'none' });
    return;
  }

  this.addForm.marksUserId = this.userid;
  console.log('当前用户ID:', this.userid); // 调试
  console.log('addForm数据:', this.addForm); // 调试
  // 初始设置为未收藏状态
  this.change = 1; // 1=显示加入，0=显示移除

  // 检查是否已收藏
  this.checkCollectionStatus();

  // 加载其他数据
  this.showAllList();
},
		onShow() {},
		methods: {
			 // 文学内容翻页方法
			    prevPage() {
			      if (this.currentPage > 0) {
			        this.currentPage--
			      }
			    },
			    nextPage() {
			      if (this.currentPage < this.contentList.length - 1) {
			        this.currentPage++
			      }
			    },
			    
			//信息展示
			showAllList() {
				//项目主体
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/all/' + this.id,
					success: (res) => {
						this.book = res.data.data
					}
				})
				// 历史发展
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/history/list',
					data: {
						historyAscriptionId: this.id,
					},
					success: (res) => {
						this.historyList = res.data.rows
					}
				})
				//工具汇总
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/tools/list',
					data: {
						toolsAscriptionId: this.id,
					},
					success: (res) => {
						this.toolsList = res.data.rows
					}
				})
				// 制作过程
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/make/list',
					data: {
						makeAscriptionId: this.id,
					},
					success: (res) => {
						this.makeList = res.data.rows
					}
				})
				// 制作材料
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/materials/list',
					data: {
						materialsAscriptionId: this.id,
					},
					success: (res) => {
						this.materialsList = res.data.rows
					}
				})
				//制作视频
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/makeVideo/list',
					data: {
						makeVideoAscriptionId: this.id,
					},
					success: (res) => {
						this.makeVideoList = res.data.rows
					}
				})
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/toolsVideo/list',
					data: {
						toolsVideoAscriptionId: this.id,
					},
					success: (res) => {
						this.toolsVideoList = res.data.rows
					}
				})
				//荣誉
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/honor/list',
					data: {
						honorAscriptionId: this.id,
					},
					success: (res) => {
						this.honorList = res.data.rows
					}
				})
				//表演形式
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/form/list',
					data: {
						performanceFormAscriptionId: this.id,
					},
					success: (res) => {
						this.formList = res.data.rows
					}
				})
				//戏剧行当
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/business/list',
					data: {
						theatreBusinessAscriptionId: this.id,
					},
					success: (res) => {
						this.theatreList = res.data.rows
					}
				})
				//唱腔
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/cavity/list',
					data: {
						vocalCavityAscriptionId: this.id,
					},
					success: (res) => {
						this.vocalList = res.data.rows
					}
				})
				//表演视频
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/video/list',
					data: {
						performanceVideoAscriptionId: this.id,
					},
					success: (res) => {
						this.performanceVideoList = res.data.rows
					}
				})
				//项目特色
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/features/list',
					data: {
						projectFeaturesAscriptionId: this.id,
					},
					success: (res) => {
						this.projectFeaturesList = res.data.rows
					}
				})
				//图片列表
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/picture/list',
					data: {
						pictureAscriptionId: this.id,
					},
					success: (res) => {
						this.pictureList = res.data.rows
					}
				})
				//节日特色
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/mores/list',
					data: {
						moresAscriptionId: this.id,
					},
					success: (res) => {
						this.moresList = res.data.rows
					}
				})
				//节日传说
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/background/list',
					data: {
						backgroundAscriptionId: this.id,
					},
					success: (res) => {
						this.backgroundList = res.data.rows
					}
				})
				//文化延伸
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/outspread/list',
					data: {
						outspreadAscriptionId: this.id,
					},
					success: (res) => {
						this.outspreadList = res.data.rows
					}
				})
				//文学内容
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/content/list',
					data: {
						literaryContentAscriptionId: this.id,
					},
					success: (res) => {
						this.contentList = res.data.rows
					}
				})
			},
			gotoOrder() {
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},
			// 图片转换
			TodoMaterial() {
				this.todoMaterial = !this.todoMaterial;
			},
			TodoTool() {
				this.todoTool = !this.todoTool;
			},
			TodoFlow() {
				this.todoFlow = !this.todoFlow;
			},
			// 提示框
			inherit() {
				let that = this
				uni.showModal({
					title: '提示：',
					content: '请确认是否发送传承请求?',
					success: function(res) {
						if (res.confirm) {
							// console.log('确定');

						} else if (res.cancel) {
							// console.log('取消');
							//TODO
						}
					}
				});
			},
			changeRecord() {
				uni.navigateTo({
					url: '/pages/recode/recode'
				})
			},
async checkCollectionStatus() {
  try {
    const [err, res] = await uni.request({
      url: this.$BASE_URL.baseUrl + '/books/marks/list',
      data: {
        marksAllId: this.id,
        marksUserId: this.userid
      }
    });
    
    if (err) {
      console.error('请求出错:', err);
      this.change = 1;
      return;
    }
    
    console.log('API 返回数据:', res.data); // 打印数据
    
    // 情况1：API 返回 { rows: [...] }
    if (res.data?.rows && Array.isArray(res.data.rows)) {
      this.change = res.data.rows.length > 0 ? 0 : 1;
    } 
    // 情况2：API 直接返回数组
    else if (Array.isArray(res.data)) {
      this.change = res.data.length > 0 ? 0 : 1;
    } 
    // 其他情况
    else {
      console.error('返回数据格式不正确:', res.data);
      this.change = 1;
    }
  } catch (error) {
    console.error('请求异常:', error);
    this.change = 1;
  }
},toAdd() {
  if (!this.addForm?.marksUserId || !this.addForm?.marksAllId) {
    console.error('addForm 数据异常:', this.addForm);
    uni.showToast({ title: '数据加载中，请稍后', icon: 'none' });
    return;
  }

uni.showModal({
  title: '提示',
  content: '请确认是否加入图鉴?',
  success: async (res) => {
    if (res.confirm) {
      try {
        // 方式1：使用手动拼接查询字符串（推荐）
        const queryString = `marksAllId=${encodeURIComponent(this.addForm.marksAllId)}&marksUserId=${encodeURIComponent(this.addForm.marksUserId)}`;

        // 方式2：或者使用 uni-app 的 FormData（但部分后端可能不支持）
        // const formData = new FormData();
        // formData.append('marksAllId', this.addForm.marksAllId);
        // formData.append('marksUserId', this.addForm.marksUserId);

        const [err, response] = await uni.request({
          url: this.$BASE_URL.baseUrl + '/books/marks',
          method: 'POST',
          header: { 
            'Content-Type': 'application/x-www-form-urlencoded' // 关键：必须设置
          },
          data: queryString, // 直接发送查询字符串
          // data: formData // 如果使用 FormData
        });

        if (err) throw err;
        
        if (response.statusCode === 200) {
          uni.showToast({ title: '加入成功', icon: 'success' });
          this.change = 0;
        } else {
          throw new Error(response.data?.msg || '操作失败');
        }
      } catch (error) {
        console.error('操作失败:', error);
        uni.showToast({ 
          title: error.message, 
          icon: 'none',
          duration: 3000
        });
      }
    }
  }
});
},
toDecrease() {
  let that = this;
  uni.showModal({
    title: '提示',
    content: '请确认是否从图鉴中移除?',
    success: async function(res) {
      if (res.confirm) {
        try {
          // 先获取收藏记录ID
          const listRes = await uni.request({
            url: that.$BASE_URL.baseUrl + '/books/marks/list',
            data: {
              marksAllId: that.id,
              marksUserId: that.userid
            }
          });

          console.log("ssss");
          console.log(listRes); // 打印整个 listRes 结构以便调试

          if (listRes && listRes.length > 1 && listRes[1] && listRes[1].data) {
            console.log('Response data:', listRes[1].data);
            if (listRes[1].data.code === 200) {
              console.log('Request successful');
              if (listRes[1].data.rows && listRes[1].data.rows.length > 0) {
                console.log('Rows found:', listRes[1].data.rows);
                // 确保 rows 数组中有数据
                const marksId = listRes[1].data.rows[0].marksId;
                if (marksId) {
                  console.log('Valid marksId found:', marksId);
                  // 执行删除
                  await uni.request({
                    url: that.$BASE_URL.baseUrl + '/books/marks/' + marksId,
                    method: 'DELETE'
                  });
                  
                  uni.showToast({ title: '移除成功', icon: 'success' });
                  that.change = 1; // 切换为加入按钮
                } else {
                  console.log('marksId is undefined or null');
                  uni.showToast({ title: '无效的收藏记录ID', icon: 'none' });
                }
              } else {
                console.log('No rows found in the response');
                uni.showToast({ title: '未找到有效收藏记录', icon: 'none' });
              }
            } else {
              console.log('Request failed with code:', listRes[1].data.code);
              uni.showToast({ title: '请求失败', icon: 'none' });
            }
          } else {
            console.log('No valid data in the response');
            uni.showToast({ title: '响应无有效数据', icon: 'none' });
          }
        } catch (error) {
          uni.showToast({ title: '操作失败', icon: 'error' });
          console.log(error);
        }
      }
    }
  });
}
		}
	}
</script>
<style scoped lang="scss">
/* 全局基础样式 */
.content {
    background-color: #7C191E;
    padding-bottom: 120rpx;
}

/* 封面图片优化 */
image[style*="width: 100%;height: 520rpx"] {
    width: 100%;
    height: 520rpx !important;
    display: block;
    object-fit: cover;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}

/* 项目名称优化 */
.cultureName {
    position: absolute;
    top: 440rpx;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(245,245,245,0.95));
    padding: 20rpx 50rpx;
    border-radius: 60rpx;
    font-size: 38rpx;
    font-weight: bold;
    color: #7C191E;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.25);
    z-index: 10;
    white-space: nowrap;
    max-width: 85%;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1rpx solid rgba(124, 25, 30, 0.1);
}

/* 内容区域优化 */
.introduce {
    background-color: #F8F5F0;
    border-radius: 50rpx 50rpx 0 0;
    margin: 70rpx 20rpx 0;
    padding: 45rpx 35rpx;
    position: relative;
    z-index: 5;
    box-shadow: 0 -15rpx 30rpx rgba(0, 0, 0, 0.08);
}

/* 通用卡片样式优化 */
.details, .slideshow, .history, 
.technology, .process-container, 
.honor-carousel, .performance-stack,
.role-cloud, .vocal-wave, 
.feature-accordion, .festival-timeline,
.literature-flip {
    background-color: #fff;
    border-radius: 24rpx;
    padding: 35rpx;
	padding-bottom: 20rpx;
    margin-bottom: 35rpx;
    box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.05);
    border: 1rpx solid rgba(124, 25, 30, 0.05);
}

/* 标题样式优化 */
.title, .section-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #7C191E;
    margin-bottom: 25rpx;
    position: relative;
	padding-top: 30rpx;
    padding-left: 25rpx;
    letter-spacing: 1rpx;
}

.title::before, .section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 36rpx;
    background: linear-gradient(to bottom, #7C191E, #9C3B40);
    border-radius: 4rpx;
}

/* 内容文本优化 */
.intro-content, .timeline-content, 
.step-content, .honor-content,
.stack-item, .wave-title,
.feature-title, .timeline-text,
.custom-text, .page-content,
.grid-item, .txt {
    font-size: 30rpx;
    line-height: 1.8;
    color: #555;
    text-align: justify;
    word-break: break-word;
}

/* 图片展示区域优化 */
.image-container {
    white-space: nowrap;
    width: 100%;
    padding: 15rpx 0;
}

.image-wrapper {
    display: inline-block;
    width: 320rpx;
    height: 240rpx;
    margin-right: 25rpx;
    position: relative;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.image-wrapper:active {
    transform: scale(0.96);
}

.gallery-image {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

/* 时间轴优化 */
.history-timeline {
    position: relative;
    padding-left: 50rpx;
}

.timeline-item {
    position: relative;
    padding-bottom: 40rpx;
    border-left: 3rpx solid #e8d8d8;
}

.timeline-dot {
    position: absolute;
    left: -16rpx;
    top: 0;
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C191E, #9C3B40);
    border: 5rpx solid #f9e9e9;
    box-shadow: 0 2rpx 8rpx rgba(124, 25, 30, 0.3);
}

/* 制作流程步骤优化 */
.process-steps {
    white-space: nowrap;
    padding: 25rpx 0;
}

.step {
    display: inline-block;
    width: 320rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 35rpx;
    margin-right: 25rpx;
    box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.08);
    vertical-align: top;
    white-space: normal;
    border: 1rpx solid rgba(124, 25, 30, 0.1);
}

.step-index {
    width: 60rpx;
    height: 60rpx;
    background: linear-gradient(135deg, #7C191E, #9C3B40);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    margin-bottom: 25rpx;
    font-weight: bold;
    box-shadow: 0 4rpx 10rpx rgba(124, 25, 30, 0.3);
}

.step-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    position: relative;
    padding-bottom: 15rpx;
}

.step-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60rpx;
    height: 4rpx;
    background: linear-gradient(to right, #7C191E, transparent);
    border-radius: 2rpx;
}

/* 荣誉轮播优化 */
.honor-swiper {
    height: 350rpx;
    border-radius: 20rpx;
    overflow: hidden;
}

.honor-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff9f0, #fff);
    border-radius: 16rpx;
    margin: 0 30rpx;
    padding: 40rpx;
    box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.1);
    border: 1rpx solid rgba(124, 25, 30, 0.1);
}

.trophy-icon {
    font-size: 80rpx;
    margin-bottom: 25rpx;
    text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

/* 卡片堆叠效果优化 */
.stack-container {
    position: relative;
    min-height: 200rpx;
}

.stack-item {
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 20rpx;
    padding: 35rpx;
    margin-bottom: 25rpx;
    box-shadow: 0 8rpx 25rpx rgba(0,0,0,0.08);
    transform: none !important;
    z-index: auto !important;
    border: 1rpx solid rgba(124, 25, 30, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stack-item:active {
    transform: translateY(-5rpx) !important;
    box-shadow: 0 12rpx 30rpx rgba(0,0,0,0.15);
}

/* 声波动画优化 */
.wave-animation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    margin-top: 30rpx;
    padding: 0 20rpx;
}

.bar {
    width: 8rpx;
    background: linear-gradient(to top, #7C191E, #BC5B60);
    border-radius: 4rpx;
    animation: wave 1.5s infinite ease-in-out;
}

@keyframes wave {
    0%, 100% { height: 20rpx; }
    50% { height: 60rpx; }
}

/* 折叠面板优化 */
.accordion-header {
    padding: 25rpx;
    background: linear-gradient(to right, rgba(124, 25, 30, 0.05), transparent);
    border-radius: 12rpx;
}

/* 节日时间轴优化 */
.timeline {
    position: relative;
    padding-left: 50rpx;
}

.timeline-item {
    position: relative;
    padding-bottom: 40rpx;
}

.timeline-dot {
    position: absolute;
    left: -16rpx;
    top: 0;
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C191E, #9C3B40);
    border: 5rpx solid #f9e9e9;
    box-shadow: 0 2rpx 8rpx rgba(124, 25, 30, 0.3);
}

.timeline-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #7C191E;
    margin-bottom: 15rpx;
}

/* 轮播图优化 */
.custom-swiper {
    height: 450rpx;
    border-radius: 20rpx;
    overflow: hidden;
}

.custom-item {
    height: 100%;
    background: linear-gradient(135deg, #fff9f0, #fff);
    border-radius: 20rpx;
    padding: 35rpx;
    box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    border: 1rpx solid rgba(124, 25, 30, 0.1);
}

.custom-image {
    width: 100%;
    height: 250rpx;
    border-radius: 12rpx;
    margin-top: 25rpx;
    object-fit: cover;
    box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.1);
}

/* 网格布局优化 */
.extension-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25rpx;
    margin-top: 30rpx;
}

.grid-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.05);
    border: 1rpx solid rgba(124, 25, 30, 0.1);
}

/* 书本翻页优化 */
.page {
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 8rpx 25rpx rgba(0,0,0,0.08);
    border: 1rpx solid rgba(124, 25, 30, 0.1);
    position: relative;
    overflow: hidden;
}

.page::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 8rpx;
    height: 100%;
    background: linear-gradient(to bottom, #7C191E, #9C3B40);
}

.page-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #7C191E;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f0e0d0;
}

.page-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40rpx;
}

.page-btn {
    padding: 18rpx 40rpx;
    background: linear-gradient(135deg, #7C191E, #9C3B40);
    color: #fff;
    border-radius: 50rpx;
    font-size: 28rpx;
    box-shadow: 0 4rpx 15rpx rgba(124, 25, 30, 0.3);
    transition: transform 0.3s ease;
}

.page-btn:active {
    transform: scale(0.95);
}

.page-btn.disabled {
    background: #ccc;
    opacity: 0.6;
    box-shadow: none;
}

/* 翻转卡片优化 */
.box {
    margin: 35rpx auto;
    width: 100%;
    height: 350rpx;
    perspective: 1200rpx;
}

.box .card {
    position: relative;
    width: 100%;
    height: 100%;
	background-color: #7C191E;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    border-radius: 25rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.box.flipped .card {
    transform: rotateY(180deg);
}

.box .make {
    background: linear-gradient(135deg, #f9f9f9, #f0f0f0);
    padding: 35rpx;
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 25rpx;
    border: 1rpx solid rgba(124, 25, 30, 0.1);
}

.box .back {
  	background-color: #7C191E;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25rpx;
    padding: 30rpx;
    border: 1rpx solid rgba(124, 25, 30, 0.1);
}

.box .txt {
    font-size: 30rpx;
    color: #555;
    line-height: 1.8;
    text-align: center;
    word-break: break-word;
}

/* 视频容器优化 */
.video {
    width: 100% !important;
    height: 350rpx !important;
    border-radius: 25rpx !important;
    background-color: #000;
    box-shadow: 0 8rpx 25rpx rgba(0,0,0,0.2);
}

/* 悬浮按钮优化 */
.jiShe {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff, #f9f9f9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 40rpx;
    bottom: 100rpx;
    box-shadow: 0 10rpx 30rpx rgba(124, 25, 30, 0.3);
    z-index: 100;
    border: 1rpx solid rgba(124, 25, 30, 0.1);
    transition: transform 0.3s ease;
}

.jiShe:active {
    transform: scale(0.95);
}

.jiShe .icon {
    margin-bottom: 12rpx;
    filter: drop-shadow(0 2rpx 4rpx rgba(124, 25, 30, 0.3));
}

.jiShe text {
    font-size: 28rpx;
    color: #7C191E;
    font-weight: bold;
    text-shadow: 0 1rpx 2rpx rgba(124, 25, 30, 0.2);
}

/* 响应式调整 */
@media screen and (max-width: 600px) {
    .step {
        width: 85%;
    }
    
    .extension-grid {
        grid-template-columns: 1fr;
    }
    
    .page-controls {
        flex-direction: column;
        gap: 25rpx;
    }
    
    .page-btn {
        width: 100%;
        text-align: center;
    }
}
</style>